/* 
通配选择：样式重置
去除所有元素的内外边距
*/
*{
    margin:0;
    padding:0;
}
#app{
   width: 100vw;
   height: 100vh; 
}

/* 水平布局 */
.row{
    display:flex; /*设置显示方式为弹性盒*/
    flex-direction:row; /*布局方向从左往右水平布局*/
}
/* 垂直布局 */
.column{
    display: flex;
    flex-direction: column;/*布局方向从上往下垂直布局*/
}

/* 通用居中 */
.center{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 标签选择器 */
header{
    flex: 1;
    /* 设置底部边框效果 */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
section{
    flex: 6;
    overflow-y: scroll; /*y轴内容超出显示区域时，显示滚动条*/
}
footer{
    padding:0 20px;
    flex: 2;
}
#musicImg{
    position:fixed;
    left:0;
    top: 0;
    z-index: -1;/*层叠于最底层*/
    height: 100%;
    filter:blur(30px);/*图片毛玻璃效果*/
}

/* rem和em的区别 */
#music-name{
    color:#fff; /*字体颜色*/
    font-size: 1.2rem; /*字体大小*/
}

.item{
    padding:0 10px;
    height: 4rem;
    line-height: 4rem;
    border-bottom: 1px dotted rgba(255,255,255,0.1);
    color:#fff;
}

/* 标记正在播放的列表项 */
/* 伪类选择器 */
.item:hover,
.active{
    color: #f00;
    background: rgba(255,255,255,0.5);
}

.item-icon,
.item-size{
    flex: 1;
}
.item-name{
    flex: 5;
}

/* 进度控制区域样式 */
.progress-box{
    position: relative;
    height: 30px;
    width: 100%;
}

.progress-bg{
    position:absolute;
    top:14px;
    height: 2px;
    width: 100%;
    background: rgba(255,255,255,0.2);
}

.progress{
    position: relative;
    width: 35%;
    height: 100%;
    background: #fff;
}

.seekbar{
    position: absolute;
    top:-4px;
    right:-5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius:50%;
    box-shadow:0 0 10px #ff0;
}

/* 时间显示区域样式 */
.time{
    height: 20px;
    line-height: 20px;
    color:#fff;
    font-size: 0.8rem;
}
.time>div{
    flex:1;
}
.time-duration{
    text-align: right;
}

/* 播放控制按钮样式 */
.btn-group{
    margin-top: 20px;
    height: 60px;
}

.btn-play-type,
.btn-play-mute{
    flex:1;
}

.btn-play-prev,
.btn-play-next{
    flex: 2;
}

.btn-play-pause{
    flex: 3;
}

button{
    border: 0;
    background: transparent;
    color: #fff;
    outline: none;
}
